<template>
	<view class="favorite-list" v-if="favoriteGoods.length>0">
		<view v-for="goods in favoriteGoods" :key="goods.goodId" class="favorite-item">
			<view class="item-left">
				<image :src="imgPath(goods.picture)" class="item-image" mode="aspectFill"></image>
			</view>
			<view class="item-right">
				<text class="item-name">{{ goods.goodName }}</text>
				<text class="item-price">¥ {{ goods.price }}</text>
			</view>
			<view class="item-cancel">
				<image src="/static/cancel.png" @click="cancelFavorite(goods.goodId)" class="cancel-icon"></image>
			</view>
		</view>
	</view>
	<!-- 空白页 -->
	<view v-else class="empty">
		<image src="/static/cancel.png" mode="aspectFit"></image>
		<view class="empty-tips">
			你还没有收藏的商品哦
			<navigator class="navigator" url="../index/index" open-type="switchTab">随便逛逛></navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 收藏的商品列表
				favoriteGoods: []
			};
		},
		onLoad() {
			this.getFavoriteGoods(); // 页面加载时获取收藏列表
		},
		methods: {
			imgPath: function(path) {
				if (path == '' || path == null || path == 'null') {
					return "/static/errorImage.jpg"
				} else if (path != '' && path.indexOf('http') >= 0) {
					return path;
				}
				return this.siteHost + path;
			},
			// 获取收藏的商品列表
			getFavoriteGoods() {
				let _this = this
				// 从本地缓存中获取已经收藏的商品列表
				_this = this.favoriteGoods = uni.getStorageSync('favoriteGoods') || [];
				console.log(this.favoriteGoods);
			},
			// 取消收藏
			cancelFavorite(goodId) {
				let _this = this
				// 从本地缓存中获取已经收藏的商品列表
				let favoriteGoods = uni.getStorageSync('favoriteGoods') || [];
				// 找到要取消收藏的商品索引
				let index = favoriteGoods.findIndex(item => item.goodId === goodId);
				if (index > -1) {
					// 从收藏列表中移除商品
					favoriteGoods.splice(index, 1);
					// 更新本地缓存中的收藏列表
					uni.setStorageSync('favoriteGoods', favoriteGoods);
					_this.$api.msg("取消成功");
					// 更新页面的收藏列表
					_this.favoriteGoods = favoriteGoods;
				} else {
					_this.$api.msg("取消失败");
				}
			},
		},
	};
</script>

<style scoped lang='scss'>
	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm+2upx;
			color: $font-color-disabled;

			.navigator {
				color: $uni-color-primary;
				margin-left: 16upx;
			}
		}
	}

	.favorite-list {
		margin: 10px;
	}

	.favorite-item {
		display: flex;
		margin-bottom: 4px;
		background-color: #ffffff;
		padding: 10px;
		border-radius: 5px;
		height: 90px;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	}

	.favorite-item:last-child {
		margin-bottom: 0;
	}

	.item-left {
		width: 40%;
	}

	.item-image {
		width: 100%;
		height: 70px;
		object-fit: contain;
	}

	.item-right {
		width: 40%;
		padding-left: 20px;
		display: flex;
		flex-direction: column;
	}

	.item-name {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.item-price {
		font-size: 14px;
		color: red;
		padding-top: 12px;
	}

	.item-cancel {
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cancel-icon {
		width: 35px;
		height: 35px;
	}
</style>
